<template>
  <div>
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }">
        <el-button
          class="buttonAdd"
          icon="el-icon-plus"
          size="mini"
          circle
          @click="openDiolag(data)"
        ></el-button>
        <p>
          <!--这里原本有动态绑定的class，去掉-->
          <span> {{ data.day.split("-").slice(1).join("-") }}<br /></span>
          <span style="font-size: 12px; color: gray">{{
            dealMyDate(data.day)
          }}</span>
        </p>
      </template>
    </el-calendar>
    <el-dialog title="添加账单" :visible.sync="dialogVisible" width="40%">
      <div>
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="getBillTypes()"
        >
          <el-tab-pane name="outcome" label="支出">
            <billAddForm
              :addForm="addForm"
              :activeName="activeName"
              :billTypeList="billTypeList"
              :closeDialog="closeDialog"
            ></billAddForm>
          </el-tab-pane>
          <el-tab-pane name="income" label="收入">
            <billAddForm
              :addForm="addForm"
              :activeName="activeName"
              :billTypeList="billTypeList"
              :closeDialog="closeDialog"
            ></billAddForm>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import BillAddForm from "@/components/BillAddForm/index";
import { listBillType } from "@/api/billType";
import { listBillForDate } from "@/api/bill";
export default {
  components: {
    BillAddForm,
  },
  data() {
    return {
      activeName: "outcome",
      billTypeList: [],
      dialogVisible: false,
      direction: "rtl",
      resDate: [],
      addForm: {
        amount: "",
        userName: "",
        teamName: "",
        isTeam: "",
        isIncome: "",
        logDate: "",
        billType: "",
        remark: "",
      },
    };
  },
  mounted() {
    this.getBillTypes();
    this.getCalendarData();
  },
  methods: {
    openDiolag(data) {
      console.log(data)
      this.dialogVisible = true;
      this.addForm.logDate = data.day
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    dealMyDate(v) {
      // console.log(v)
      let len = this.resDate.length;
      let res = "";
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].date == v) {
          res = this.resDate[i].content;
          break;
        }
      }
      return res;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getCalendarData() {
      const param = {
        userName: this.$store.getters.name,
        teamName: this.$store.getters.teamName,
      };
      if (param.teamName == "个人版") {
        listBillForDate(param).then((res) => {
          if (res.code == 0) {
            this.resDate = res.data;
          }
        });
      } else {
        listBillForDate({ teamName: param.teamName }).then((res) => {
          if (res.code == 0) {
            this.resDate = res.data;
          }
        });
      }
    },
    getBillTypes() {
      const param = {
        isIncome: "",
      };
      if (this.activeName == "income") {
        param.isIncome = 1;
      } else if (this.activeName == "outcome") {
        param.isIncome = 0;
      }
      listBillType(param).then((res) => {
        this.billTypeList = res.data;
      });
    },
  },
};
</script>
<style scoped type="scss">
.buttonAdd {
  float: right;
}
</style>